<template>
  <div class="container border-bottom">
    <ul class="choose">
      <li
        class="title item"
        :class="{active: chooseIndex == 0}"
        :key="0"
        :id="0"
        :data-name="''"
        @click="handleItemClick"
      >
        {{title}}
      </li>
      <li
        v-for="(item,index) of list"
        :key="index + 1"
        :data-name="item"
        :id="index + 1"
        class="item"
        :class="{active: chooseIndex == index + 1}"
        @click="handleItemClick"
      >
        {{item}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Choose',
  props: {
    title: String,
    list: Array
  },
  data () {
    return {
      chooseIndex: 0
    }
  },
  methods: {
    handleItemClick (e) {
      const name = e.target.dataset.name
      this.chooseIndex = e.target.id
      this.$emit('choose', name)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .container
    box-sizing: border-box
    padding: .1rem
    .choose
      overflow: hidden
      font-size: .14rem
      .item
        float: left
        padding: 0 .05rem
        height: .3rem
        text-align: center
        line-height: .3rem
        color: #333
      .active
        color: #ffffff
        background: #258dcd

</style>
